<template>
  <el-form
    ref="ruleFormRef"
    :model="studentInfo"
    label-width="120px"
    status-icon
  >
    <el-row>
      <el-col :span="8">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="userData.studentName"
            disabled
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="考生性别">
          <el-radio-group v-model="studentInfo.sex" disabled>
            <el-radio :value="0">男</el-radio>
            <el-radio :value="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="考生名族" prop="name">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="studentInfo.nation"
            placeholder="请选择民族"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in clanlist"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="登录账号" prop="name">
          <el-input v-model="studentInfo.phone" disabled style="width: 200px" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="高考省份" prop="name">
          <el-input
            v-model="studentInfo.s_province"
            disabled
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="高考年份" prop="name">
          <el-input
            v-model="studentInfo.graduate_time"
            disabled
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="学校地区" prop="name">
          <el-input
            v-model="studentInfo.s_province"
            disabled
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="" prop="name">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="studentInfo.s_city"
            placeholder="请选择城市"
            style="width: 200px"
            @change="cityChange"
          >
            <el-option
              v-for="(item, index) in cityList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="" prop="name">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="studentInfo.s_district"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="(item, index) in areaData"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="" prop="name">
          <el-input
            v-model="studentInfo.s_school"
            placeholder="请输入学校"
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="订单编号" prop="name">
          <span id="textId"> {{ text }}</span>
          <el-icon style="margin-left: 10px; cursor: pointer">
            <CopyDocument @click="copychange" />
          </el-icon>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { copyText } from 'vue3-clipboard';
import { getAreaChilds } from '@/api/leader/Filling.js';
import studentsStore from '@/store/modules/students';
import clan from '@/utils/clan.js';

const studentStore = studentsStore(); // 学生信息仓库
const studentInfo = computed(() => studentStore.studentInfo); // 学生信息
const clanlist = ref(clan); // 名族
const cityList = ref([]); // 市
const areaData = ref([]); // 区

const props = defineProps({
  userData: {
    type: Object,
    default: {},
  },
});

watch(studentInfo, () => {
  if (cityList.value.length == 0) {
    getAreaChildsList();
  }
});

const text = ref(props.userData.orderNo);

// 获取省市区数据
function getAreaChildsList() {
  getAreaChilds({
    pid: studentInfo.value.pid,
  }).then((res) => {
    cityList.value = res.data['0']['childs'];

    cityList.value.forEach((item) => {
      // 通过市ID查找市名称
      if (item.name == studentInfo.value.s_city) {
        areaData.value = item.childs;
      }
    });
  });
}

/**
 * 市地区值改变
 * @param {Number} val cityId
 */
function cityChange(val) {
  const dateinfo = cityList.value.find((item) => item.name === val);
  // 设置区数据
  areaData.value = dateinfo.childs;
  // 修改学生市ID信息
  studentInfo.value.s_city = val;
  studentInfo.value.s_district = '';
}

function copychange() {
  // 一键复制订单编号
  copyText(text.value, undefined, (error) => {
    if (error) {
      ElMessage.error(`复制失败: ${error} ！`);
    } else {
      ElMessage.success(`复制: ${text.value} 成功！`);
    }
  });
}
</script>
<style lang="scss" scoped></style>
